<template>
	<view class="pagesss">
		<view class="userinfo_box">
			<view class="avatar">
				<view class="login-btn" @click="goUserinfo">
					<image src="../static/images/missing-face.png" mode=""></image>
					<!-- <image :src="vuex_USER.avatar || avatar" mode=""></image> -->
				</view>
			</view>
			<view class="info">
				<view class="nickname">
					<view class="text">用户</view>
				</view>
				<view class="vip">
					<text class="text">您好</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
	  onLoad() {
			
		},
		methods:{
			goUserinfo(){
				console.log(111);
				uni.navigateTo({
					url:'/pages/userInfo'
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.pagesss {
		.userinfo_box {
			display: flex;
			align-items: center;
			position: relative;
			// box-shadow: 0rpx 4rpx 11rpx 2rpx rgba(0, 0, 0, 0.1);
			width: 100%;
			height: 180rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
		
			.arrow {
				position: absolute;
				top: 15%;
				right: 36rpx;
				width: 180rpx;
				height: 60rpx;
				background: #FFFFFF;
				text-align: center;
				line-height: 60rpx;
				font-size: 32rpx;
				border-radius: 40rpx;
				color: #20AB3A;
				font-weight: 500;
			}
		
			.avatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				overflow: hidden;
				margin-left: 30rpx;
		
				.image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
		
				.login-btn {
					// width: 140rpx;
					/* 设置宽度 */
					height: 140rpx;
					/* 设置高度 */
					// background-image: url('https://hbplaylet.oss-cn-hangzhou.aliyuncs.com/system/image/20240307/1709796410948avatar.png');
					/* 背景图片路径 */
					background-size: cover;
					/* 图片填满整个容器 */
					background-repeat: no-repeat;
					/* 不重复显示背景图片 */
					border-radius: 8rpx;
					/* 自定义圆角大小（可选） */
					border-width: 0;
					/* 去除默认边框 */
					border: none;
					
					image {
						width: 136rpx;
						height: 136rpx;
					}
				}
			}
			.info {
				flex: 1;
				margin-left: 32rpx;
				height: 120rpx;
				margin-top: 20rpx;
			
				.nickname {
					display: flex;
					align-items: center;
			
					.text {
						font-size: 36rpx;
						color: #000000;
						font-weight: 900;
					}
			
					.image {
						width: 52rpx;
						margin-left: 8rpx;
						
						.images{
							width: 160rpx;
							height: 50rpx;
							margin-left: 20rpx;
						}
						
						.imagess{
							width: 160rpx;
							height: 70rpx;
							margin: -20rpx 0 0 10rpx;
						}
					}
				}
			
				.vip {
					display: flex;
					margin-top: 10rpx;
			
					.text {
						// margin-left: 10rpx;
						color: #000000;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>